<!DOCTYPE html>
<html>
<head>
    <title>Motion</title>
    <meta content="text/html" charset="UTF-8"/>
</head>
<body>
<canvas id="canvas" width="800" height="600">
    Your browser not support Canvas!
</canvas>
<input type="button" id="b" value="匀速直线" onclick="move()"/>
<input type="button" id="b_a" value="自由落体" onclick="move_a()"/>
<input type="button" id="b_p" value="平抛运动" onclick="move_p()"/>
<input type="button" id="b_r" value="很多平抛" onclick="move_r()"/>

<script type="text/javascript">
    var balls = [];
    balls.length = 0;
    var ball = {
        position:{x:100,y:100},
        r:20,
        vx:0,
        vy:0
    };

    var ball1 = {
        position:{x:100,y:100},
        r:20,
        vx:0,
        vy:0
    };

    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");

    //匀速直线运动
    function move(){
        var cycle = 100;
        ball.x=100;
        ball.y=100;
        ball.vx=100;
        ball.vy=50;
        var s = setInterval(function(){
            ctx.fillStyle = "rgba(0,0,0,.3)";
            //ctx.fillStyle = "rgb(0,0,0)";
            ctx.fillRect(0,0,c.width,c.height);
            ctx.fillStyle = "#fff";
            ctx.beginPath();
            ctx.arc(ball.position.x,ball.position.y,ball.r,0,Math.PI*2,true);
            ctx.closePath();
            ctx.fill();
            ball.position.x += ball.vx*cycle/1000;
            ball.position.y += ball.vy*cycle/1000;
            //console.log(ball.position.x);
        },cycle);
    }

    //自由落体运动
    function move_a(){
        var cycle = 100;
        var a=50;   //加速度
        ball.x=100;
        ball.y=100;
        ball.vx=0;
        ball.vy=0;
        var s = setInterval(function(){
            ctx.fillStyle = "rgba(0,0,0,.3)";
            //ctx.fillStyle = "rgb(0,0,0)";
            ctx.fillRect(0,0,c.width,c.height);
            ctx.fillStyle = "#fff";
            ctx.beginPath();
            ctx.arc(ball.position.x,ball.position.y,ball.r,0,Math.PI*2,true);
            ctx.closePath();
            ctx.fill();
            ball.position.x += ball.vx*cycle/1000;
            ball.position.y += ball.vy*cycle/1000;
            if(ball.position.y + ball.r > c.height){
                if(ball.vy > 0.0001){
                    ball.vy *= -0.9;
                }
                else {
                    ball.vy = 0;
                }
            }
            else {
                ball.vy += a;
            }
        },cycle);

    }

    //平抛运动
    function move_p(){
        balls = [];
        balls.length = 0;

        ball.vx=0;
        ball.vy=0;

        ball1.vx=300;
        ball1.vy=0;

        balls.push(ball);
        balls.push(ball1);

        var cycle = 100;
        var a = 50;

        var t = setInterval(function(){
            ctx.fillStyle = "rgba(0,0,0,.3)";
            ctx.fillRect(0,0,c.width,c.height);
            ctx.fillStyle = "#FFF";

            for(var t in balls){
                ctx.beginPath();
                ctx.arc(balls[t].position.x,balls[t].position.y,balls[t].r,0,Math.PI*2,true);
                ctx.closePath();
                ctx.fill();

                balls[t].position.x += balls[t].vx*cycle/1000;
                balls[t].position.y += balls[t].vy*cycle/1000;

                if(balls[t].position.y + balls[t].r > c.height){
                    if(balls[t].vy > 0.0001){
                        balls[t].vy *= -0.9;
                    }
                    else {
                        balls[t].vy = 0;
                    }
                }
                else {
                    balls[t].vy += a;
                }

                if(balls[t].position.x + balls[t].r > c.width ||
                   balls[t].position.x + balls[t].r < 0){
                   balls[t].vx *= -1;
                }

            }

            //console.log("1");

        },cycle);
    }

    //各种角度 - 抛物运动
    function move_r(){
        initBalls();
//console.log("1");
        var cycle = 100;
        var a = 50;

        var s = setInterval(function(){
            ctx.fillStyle = "rgba(0,0,0,.5)";
            ctx.fillRect(0,0,c.width,c.height);
            ctx.fillStyle = "#FFF";

            for(var t in balls){
                ctx.beginPath();
                ctx.arc(balls[t].position.x,balls[t].position.y,balls[t].r,0,Math.PI*2,true);
                ctx.closePath();
                ctx.fill();

                balls[t].position.x += balls[t].vx*cycle/1000;
                balls[t].position.y += balls[t].vy*cycle/1000;

                if(balls[t].position.y + balls[t].r > c.height){
                    if(balls[t].vy > 0.0001){
                        balls[t].vy *= -0.9;
                    }
                    else {
                        balls[t].vy = 0;
                    }
                }
                else {
                    balls[t].vy += a;
                }

                if(balls[t].position.x + balls[t].r > c.width ||
                        balls[t].position.x + balls[t].r < 0){
                    balls[t].vx *= -1;
                }

            }
        },cycle);

    }



    function initBalls(){
        balls = [];
        balls.length = 0;
        for(var i=0;i<100;i++){
            var t = {
                position:{x:100,y:200},
                r:10,
                vx:getRandom(1,300),
                vy:getRandom(-300,-10)
            }
            balls.push(t);
        }
    }

    function getRandom(min,max){
        return min + Math.floor(Math.random()*(max - min + 1));
    }


    //move();
    //move_a();
    //move_p();
    //move_r();

</script>
</body>
</html>